<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./swiper/swiper-bundle.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 头部 -->
    <div class="head container-w">
        <div class="content container">
            <p class="left cfff">乐购www.legou.con</p>
            <div class="cfff reight">欢迎光临乐购 请<a class="cf60" href="#">登录 </a><span class="cf60"> | </span><a class="cf60" href="#"> 注册</a></div>
        </div>
    </div>

    <!-- 导航 -->
    <div class="nav">
        <div class="container content">
            <div class="logo"></div>
            <div class="reight-nav">
                <div class="top">
                    <div class="seek">
                        <input type="text" placeholder="请输入您要搜索的关键字"><button><img src="./img/首页/搜索.png" alt=""></button>
                    </div>
                    <div class="car cf60 c14 f700">购物车<span class="cfff c14">0</span></div>
                    <div class="indent cccc c14 f700">我的订单</div>
                </div>
                <ul class="bottom">
                    <li>图书</li>
                    <li>电子书</li>
                    <li>原创文学</li>
                    <li id="clothing">服装</li>
                    <li>运动户外</li>
                    <li>孕婴童</li>
                    <li>家居 </li>
                    <li>创意文具</li>
                    <li>地方特产</li>
                    <li>海外购</li>
                    <li>电器城</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 轮播 -->
    <div class="carousel">
        <div class="container content">
            <ul class="left">
                <li>
                    <a href="#">图书</a><a href="#">电子书</a><a href="#">童书</a> <span>></span>
                    <!-- <div class="details">
                        <div><span>图书馆>></span><span>儿童书馆>></span><span>电子书馆>></span></div>
                        <div class="title"></div>
                        <div class="classify">
                            <a href="#">小说</a><a href="#">文学</a><a href="#">青春</a><a href="#">动漫</a><a href="#">艺术</a><a href="#">摄影</a><a href="#">明星</a>
                        </div>
                    </div> -->
                </li>
                <li>
                    <a href="#">图书</a><a href="#">电子书</a><a href="#">童书</a> <span>></span>
                    <!-- <div class="details">
                        <div><span>图书馆>></span><span>儿童书馆>></span><span>电子书馆>></span></div>
                        <div class="title"></div>
                        <div class="classify">
                            <a href="#">小说</a><a href="#">文学</a><a href="#">青春</a><a href="#">动漫</a><a href="#">艺术</a><a href="#">摄影</a><a href="#">明星</a>
                        </div>
                    </div> -->
                </li>
                <li>
                    <a href="#">图书</a><a href="#">电子书</a><a href="#">童书</a> <span>></span>
                    <!-- <div class="details">
                        <div><span>图书馆>></span><span>儿童书馆>></span><span>电子书馆>></span></div>
                        <div class="title"></div>
                        <div class="classify">
                            <a href="#">小说</a><a href="#">文学</a><a href="#">青春</a><a href="#">动漫</a><a href="#">艺术</a><a href="#">摄影</a><a href="#">明星</a>
                        </div>
                    </div> -->
                </li>
                <li>
                    <a href="#">图书</a><a href="#">电子书</a><a href="#">童书</a> <span>></span>
                    <!-- <div class="details">
                        <div><span>图书馆>></span><span>儿童书馆>></span><span>电子书馆>></span></div>
                        <div class="title"></div>
                        <div class="classify">
                            <a href="#">小说</a><a href="#">文学</a><a href="#">青春</a><a href="#">动漫</a><a href="#">艺术</a><a href="#">摄影</a><a href="#">明星</a>
                        </div>
                    </div> -->
                </li>
                <li>
                    <a href="#">图书</a><a href="#">电子书</a><a href="#">童书</a> <span>></span>
                    <!-- <div class="details">
                        <div><span>图书馆>></span><span>儿童书馆>></span><span>电子书馆>></span></div>
                        <div class="title"></div>
                        <div class="classify">
                            <a href="#">小说</a><a href="#">文学</a><a href="#">青春</a><a href="#">动漫</a><a href="#">艺术</a><a href="#">摄影</a><a href="#">明星</a>
                        </div>
                    </div> -->
                </li>
                <li>
                    <a href="#">图书</a><a href="#">电子书</a><a href="#">童书</a> <span>></span>
                    <!-- <div class="details">
                        <div><span>图书馆>></span><span>儿童书馆>></span><span>电子书馆>></span></div>
                        <div class="title"></div>
                        <div class="classify">
                            <a href="#">小说</a><a href="#">文学</a><a href="#">青春</a><a href="#">动漫</a><a href="#">艺术</a><a href="#">摄影</a><a href="#">明星</a>
                        </div>
                    </div> -->
                </li>
                <li>
                    <a href="#">图书</a><a href="#">电子书</a><a href="#">童书</a> <span>></span>
                    <!-- <div class="details">
                        <div><span>图书馆>></span><span>儿童书馆>></span><span>电子书馆>></span></div>
                        <div class="title"></div>
                        <div class="classify">
                            <a href="#">小说</a><a href="#">文学</a><a href="#">青春</a><a href="#">动漫</a><a href="#">艺术</a><a href="#">摄影</a><a href="#">明星</a>
                        </div>
                    </div> -->
                </li>
                <li>
                    <a href="#">图书</a><a href="#">电子书</a><a href="#">童书</a> <span>></span>
                    <!-- <div class="details">
                        <div><span>图书馆>></span><span>儿童书馆>></span><span>电子书馆>></span></div>
                        <div class="title"></div>
                        <div class="classify">
                            <a href="#">小说</a><a href="#">文学</a><a href="#">青春</a><a href="#">动漫</a><a href="#">艺术</a><a href="#">摄影</a><a href="#">明星</a>
                        </div>
                    </div> -->
                </li>
                <li>
                    <a href="#">图书</a><a href="#">电子书</a><a href="#">童书</a> <span>></span>
                    <!-- <div class="details">
                        <div><span>图书馆>></span><span>儿童书馆>></span><span>电子书馆>></span></div>
                        <div class="title"></div>
                        <div class="classify">
                            <a href="#">小说</a><a href="#">文学</a><a href="#">青春</a><a href="#">动漫</a><a href="#">艺术</a><a href="#">摄影</a><a href="#">明星</a>
                        </div>
                    </div> -->
                </li>
                <li>
                    <a href="#">图书</a><a href="#">电子书</a><a href="#">童书</a> <span>></span>
                    <!-- <div class="details">
                        <div><span>图书馆>></span><span>儿童书馆>></span><span>电子书馆>></span></div>
                        <div class="title"></div>
                        <div class="classify">
                            <a href="#">小说</a><a href="#">文学</a><a href="#">青春</a><a href="#">动漫</a><a href="#">艺术</a><a href="#">摄影</a><a href="#">明星</a>
                        </div>
                    </div> -->
                </li>
                <li>
                    <a href="#">图书</a><a href="#">电子书</a><a href="#">童书</a> <span>></span>
                    <!-- <div class="details">
                        <div><span>图书馆>></span><span>儿童书馆>></span><span>电子书馆>></span></div>
                        <div class="title"></div>
                        <div class="classify">
                            <a href="#">小说</a><a href="#">文学</a><a href="#">青春</a><a href="#">动漫</a><a href="#">艺术</a><a href="#">摄影</a><a href="#">明星</a>
                        </div>
                    </div> -->
                </li>
                <li>
                    <a href="#">图书</a><a href="#">电子书</a><a href="#">童书</a> <span>></span>
                    <!-- <div class="details">
                        <div><span>图书馆>></span><span>儿童书馆>></span><span>电子书馆>></span></div>
                        <div class="title"></div>
                        <div class="classify">
                            <a href="#">小说</a><a href="#">文学</a><a href="#">青春</a><a href="#">动漫</a><a href="#">艺术</a><a href="#">摄影</a><a href="#">明星</a>
                        </div>
                    </div> -->
                </li>
                <li>
                    <a href="#">图书</a><a href="#">电子书</a><a href="#">童书</a> <span>></span>
                    <!-- <div class="details">
                        <div><span>图书馆>></span><span>儿童书馆>></span><span>电子书馆>></span></div>
                        <div class="title"></div>
                        <div class="classify">
                            <a href="#">小说</a><a href="#">文学</a><a href="#">青春</a><a href="#">动漫</a><a href="#">艺术</a><a href="#">摄影</a><a href="#">明星</a>
                        </div>
                    </div> -->
                </li>
                <li>
                    <a href="#">图书</a><a href="#">电子书</a><a href="#">童书</a> <span>></span>
                    <!-- <div class="details">
                        <div><span>图书馆>></span><span>儿童书馆>></span><span>电子书馆>></span></div>
                        <div class="title"></div>
                        <div class="classify">
                            <a href="#">小说</a><a href="#">文学</a><a href="#">青春</a><a href="#">动漫</a><a href="#">艺术</a><a href="#">摄影</a><a href="#">明星</a>
                        </div>
                    </div> -->
                </li>
            </ul>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><div class="box"><img src="./img/首页/轮播.jpg"></div></div>
                    <div class="swiper-slide"><div class="box"><img src="./img/首页/轮播1.jpg"></div></div>
                    <div class="swiper-slide"><div class="box"><img src="./img/首页/轮播.jpg"></div></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </div>

    <!-- 广告 -->
    <div class="advertising container">
        <div class="top">
            <img src="./img/首页/广告1.jpg">
            <img src="./img/首页/广告2.jpg">
            <img src="./img/首页/广告3.jpg">
            <img src="./img/首页/广告1.jpg">
        </div>
        <div class="bottom"><img src="./img/首页/广告4.jpg" alt=""></div>
    </div>

    <!-- 秒杀 -->
    <div class="seckill container">
        <div class="btop">
            <div class="layer">
                <h3 class="title cfff c24">乐购.今日秒杀</h3>
                <img src="./img/首页/闪电.png">
                <p class="cfff c12">倒计时</p>
                <div class="time cfff c24">
                    <div id="h"></div>:
                    <div id="f"></div>:
                    <div id="m"></div>
                </div>
            </div>
        </div>
        <div class="swiper-container-seckill">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><ul class="content">
                    <li>
                        <div class="box"><img src="./img/首页/秒杀.jpg"></div>
                        <p class="c14 c666">小米小爱音箱 Play</p>
                        <p class="cred c16">￥129<del class="c666 c12">￥230</del></p>
                    </li>
                    <li>
                        <div class="box"><img src="./img/首页/秒杀.jpg"></div>
                        <p class="c14 c666">小米小爱音箱 Play</p>
                        <p class="cred c16">￥129<del class="c666 c12">￥230</del></p>
                    </li>
                    <li>
                        <div class="box"><img src="./img/首页/秒杀.jpg"></div>
                        <p class="c14 c666">小米小爱音箱 Play</p>
                        <p class="cred c16">￥129<del class="c666 c12">￥230</del></p>
                    </li>
                    <li>
                        <div class="box"><img src="./img/首页/秒杀.jpg"></div>
                        <p class="c14 c666">小米小爱音箱 Play</p>
                        <p class="cred c16">￥129<del class="c666 c12">￥230</del></p>
                    </li>
                </ul></div>
                    <div class="swiper-slide"><ul class="content">
                        <li>
                            <div class="box"><img src="./img/首页/秒杀.jpg"></div>
                            <p class="c14 c666">小米小爱音箱 Play</p>
                            <p class="cred c16">￥129<del class="c666 c12">￥230</del></p>
                        </li>
                        <li>
                            <div class="box"><img src="./img/首页/秒杀.jpg"></div>
                            <p class="c14 c666">小米小爱音箱 Play</p>
                            <p class="cred c16">￥129<del class="c666 c12">￥230</del></p>
                        </li>
                        <li>
                            <div class="box"><img src="./img/首页/秒杀.jpg"></div>
                            <p class="c14 c666">小米小爱音箱 Play</p>
                            <p class="cred c16">￥129<del class="c666 c12">￥230</del></p>
                        </li>
                        <li>
                            <div class="box"><img src="./img/首页/秒杀.jpg"></div>
                            <p class="c14 c666">小米小爱音箱 Play</p>
                            <p class="cred c16">￥129<del class="c666 c12">￥230</del></p>
                        </li>
                    </ul></div>
                    <div class="swiper-slide"><ul class="content">
                        <li>
                            <div class="box"><img src="./img/首页/秒杀.jpg"></div>
                            <p class="c14 c666">小米小爱音箱 Play</p>
                            <p class="cred c16">￥129<del class="c666 c12">￥230</del></p>
                        </li>
                        <li>
                            <div class="box"><img src="./img/首页/秒杀.jpg"></div>
                            <p class="c14 c666">小米小爱音箱 Play</p>
                            <p class="cred c16">￥129<del class="c666 c12">￥230</del></p>
                        </li>
                        <li>
                            <div class="box"><img src="./img/首页/秒杀.jpg"></div>
                            <p class="c14 c666">小米小爱音箱 Play</p>
                            <p class="cred c16">￥129<del class="c666 c12">￥230</del></p>
                        </li>
                        <li>
                            <div class="box"><img src="./img/首页/秒杀.jpg"></div>
                            <p class="c14 c666">小米小爱音箱 Play</p>
                            <p class="cred c16">￥129<del class="c666 c12">￥230</del></p>
                        </li>
                    </ul></div>  
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev-seckill"><img src="./img/首页/箭头.png"></div>
            <div class="swiper-button-next-seckill"><img src="./img/首页/箭头.png"></div>
        </div>
        
    </div>

    <!-- 每日推荐 -->
    <div class="daily-special">
        <div class="content container">
            <div class="title c30 f700">
                <p>每日好货推荐</p>
                <img class="img1" src="./img/首页/sprite.png">
                <img class="img2" src="./img/首页/sprite.png">
            </div>
            <div class="bottom">
                <img src="./img/首页/推荐1.jpg">
                <img src="./img/首页/推荐2.jpg">
            </div>
        </div>
    </div>

    <!-- 服装 -->
    <div class="clothing container">
        <div class="title"><img src="./img/首页/0-首页1.jpg"><div class="list c16"><div class="realize listbox">热销内衣 <div></div></div><div class="listbox"><div></div> 精品男装</div><div class="listbox"><div></div> 童装</div></div></div>
        <div class="showclothing"><div class="content">
            <div class="left">
                <img src="./img/首页/1.jpg">
                <div class="introduce">
                    <h3>黄金珠宝节</h3>
                    <span>每满1300减30</span>
                </div>
                <div class="menus">
                    <button>女装</button>
                    <button>内衣</button>
                    <button>泳衣</button>
                    <button>功能箱包</button>
                    <button>户外运动</button>
                    <button>男装</button>
                    <button>女鞋</button>
                    <button>男鞋</button>
                    <button>全部分类</button>
                </div>
            </div>
            <div class="center">
                <div class="top">
                    <div class="swiper-container-clothing">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="./img/首页/timg.jpg"></div>
                            <div class="swiper-slide"><img src="./img/首页/timg.jpg"></div>
                            <div class="swiper-slide"><img src="./img/首页/timg.jpg"></div>
                        </div>
                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev-clothing"><img src="./img/首页/箭头.png"></div>
                        <div class="swiper-button-next-clothing"><img src="./img/首页/箭头.png"></div>
                    </div>
                </div>
                <div class="bottom">
                    <img src="./img/首页/0-首页_03.jpg" alt="">
                </div>
            </div>
            <div class="right">
                <div>
                    <p>时尚精致女装</p>
                    <span>春夏女装99选3</span>
                    <img src="./img/首页/11.jpg">
                </div>
                <div>
                    <p>打牌品质鞋包</p>
                    <span>打牌鞋包不止5折</span>
                    <img src="./img/首页/12.jpg">
                </div>
                <div>
                    <p>魅力舒适内衣</p>
                    <span>CK文胸买2免1</span>
                    <img src="./img/首页/13.jpg">
                </div>
                <div>
                    <p>型格潮流男装</p>
                    <span>阿玛尼低至3折</span>
                    <img src="./img/首页/14.jpg">
                </div>
            </div>
        </div></div>
        <div class="showclothing"><div class="content">
            <div class="left">
                <img src="./img/首页/1.jpg">
                <div class="introduce">
                    <h3>黄金珠宝节</h3>
                    <span>每满2300减30</span>
                </div>
                <div class="menus">
                    <button>女装</button>
                    <button>内衣</button>
                    <button>泳衣</button>
                    <button>功能箱包</button>
                    <button>户外运动</button>
                    <button>男装</button>
                    <button>女鞋</button>
                    <button>男鞋</button>
                    <button>全部分类</button>
                </div>
            </div>
            <div class="center">
                <div class="top">
                    <div class="swiper-container-clothing">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="./img/首页/timg.jpg"></div>
                            <div class="swiper-slide"><img src="./img/首页/timg.jpg"></div>
                            <div class="swiper-slide"><img src="./img/首页/timg.jpg"></div>
                        </div>
                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev-clothing"><img src="./img/首页/箭头.png"></div>
                        <div class="swiper-button-next-clothing"><img src="./img/首页/箭头.png"></div>
                    </div>
                </div>
                <div class="bottom">
                    <img src="./img/首页/0-首页_03.jpg" alt="">
                </div>
            </div>
            <div class="right">
                <div>
                    <p>时尚精致女装</p>
                    <span>春夏女装99选3</span>
                    <img src="./img/首页/11.jpg">
                </div>
                <div>
                    <p>打牌品质鞋包</p>
                    <span>打牌鞋包不止5折</span>
                    <img src="./img/首页/12.jpg">
                </div>
                <div>
                    <p>魅力舒适内衣</p>
                    <span>CK文胸买2免1</span>
                    <img src="./img/首页/13.jpg">
                </div>
                <div>
                    <p>型格潮流男装</p>
                    <span>阿玛尼低至3折</span>
                    <img src="./img/首页/14.jpg">
                </div>
            </div>
        </div></div>
        <div class="showclothing"><div class="content">
            <div class="left">
                <img src="./img/首页/1.jpg">
                <div class="introduce">
                    <h3>黄金珠宝节</h3>
                    <span>每满3300减30</span>
                </div>
                <div class="menus">
                    <button>女装</button>
                    <button>内衣</button>
                    <button>泳衣</button>
                    <button>功能箱包</button>
                    <button>户外运动</button>
                    <button>男装</button>
                    <button>女鞋</button>
                    <button>男鞋</button>
                    <button>全部分类</button>
                </div>
            </div>
            <div class="center">
                <div class="top">
                    <div class="swiper-container-clothing">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="./img/首页/timg.jpg"></div>
                            <div class="swiper-slide"><img src="./img/首页/timg.jpg"></div>
                            <div class="swiper-slide"><img src="./img/首页/timg.jpg"></div>
                        </div>
                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev-clothing"><img src="./img/首页/箭头.png"></div>
                        <div class="swiper-button-next-clothing"><img src="./img/首页/箭头.png"></div>
                    </div>
                </div>
                <div class="bottom">
                    <img src="./img/首页/0-首页_03.jpg" alt="">
                </div>
            </div>
            <div class="right">
                <div>
                    <p>时尚精致女装</p>
                    <span>春夏女装99选3</span>
                    <img src="./img/首页/11.jpg">
                </div>
                <div>
                    <p>打牌品质鞋包</p>
                    <span>打牌鞋包不止5折</span>
                    <img src="./img/首页/12.jpg">
                </div>
                <div>
                    <p>魅力舒适内衣</p>
                    <span>CK文胸买2免1</span>
                    <img src="./img/首页/13.jpg">
                </div>
                <div>
                    <p>型格潮流男装</p>
                    <span>阿玛尼低至3折</span>
                    <img src="./img/首页/14.jpg">
                </div>
            </div>
        </div></div>
    </div>

    <!-- 童装 -->
    <div class="child"></div>

    <!-- 精致 -->
    <div class="delicacy"></div>

    <!-- 家具 -->
    <div class="furniture"></div>

    <!-- 页脚 -->
    <div class="footer"></div>

    <!-- 侧边栏 -->
    <div class="sidebar"></div>

    <script src="./swiper/swiper-bundle.js"></script>
    <script src="./js/index.js"></script>
</body>
</html>